<h1 class="page_title">
		导航	</h1>
		<h2>
		1 导航条	</h2>
	<div class="codeView bs-docs-example ">
				<nav class="mainnav cl">
					<ul class="mainnav cl  mainnav cl">
								 <li class="current"><a href="#">
	 首页	 </a></li>
			 <li><a href="#">
	 核心	 </a></li>
			 <li><a href="#">
	 扩展	 </a></li>
			 <li><a href="#">
	 案例	 </a></li>
			 <li><a href="#">
	 联系我们	 </a></li>
		    </ul>
		</nav>
	</div>
	<p>
		鼠标经过状态a:hover，当前选中状态li.current。 	</p>

	<div class="codeView bs-docs-example ">
		<script type="text/javascript">
jQuery(document).ready(function(){
	var qcloud={};
	$('[_t_nav]').hover(function(){
		var _nav = $(this).attr('_t_nav');
		clearTimeout( qcloud[ _nav + '_timer' ] );
		qcloud[ _nav + '_timer' ] = setTimeout(function(){
		$('[_t_nav]').each(function(){
		$(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('nav-up-selected');
		});
		$('#'+_nav).stop(true,true).slideDown(200);
		}, 150);
	},function(){
		var _nav = $(this).attr('_t_nav');
		clearTimeout( qcloud[ _nav + '_timer' ] );
		qcloud[ _nav + '_timer' ] = setTimeout(function(){
		$('[_t_nav]').removeClass('nav-up-selected');
		$('#'+_nav).stop(true,true).slideUp(200);
		}, 150);
	});
});
</script>
<div class="head-v3">
	<div class="navigation-up">
		<div class="navigation-inner">
			<div class="navigation-v3">
				<ul>
					<li class="nav-up-selected-inpage" _t_nav="home">
							<a href="#">首页</a>
					</li>
					<li class="" _t_nav="product">
							<a href="#">云产品</a>
					</li>
					<li class="" _t_nav="wechat">
							<a href="#">微信建站</a>
					</li>
					<li class="" _t_nav="solution">
							<a href="#">行业解决方案</a>
					</li>
					<li class="" _t_nav="cooperate">
							<a href="#">合作伙伴</a>
					</li>
					<li _t_nav="support">
							<a href="#">帮助与支持</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="navigation-down">
		<div id="product" class="nav-down-menu menu-1" style="display: none;" _t_nav="product">
			<div class="navigation-down-inner">
				<dl style="margin-left: 100px;">
					<dt>计算机与网络</dt>
					<dd>
						<a hotrep="hp.header.product.compute1" href="#">云服务器</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.compute2" href="#">弹性Web引擎</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.compute3" href="#">负载均衡</a>
					</dd>
				</dl>
				<dl>
					<dt>存储与CDN</dt>
					<dd>
						<a hotrep="hp.header.product.storage1" href="#">云数据库</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.storage2" href="#">NoSQL高速存储</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.storage4" href="#">对象存储服务(beta)</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.storage3" href="#">CDN</a>
					</dd>
				</dl>
				<dl>
					<dt>监控与安全</dt>
					<dd>
						<a hotrep="hp.header.product.monitoring1" href="#">云监控</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.monitoring2" href="#">云安全</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.monitoring3" href="#">云拨测</a>
					</dd>
				</dl>
				<dl>
					<dt>数据分析</dt>
					<dd>
						<a hotrep="hp.header.product.analysis1" href="#">腾讯云分析</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.analysis2" href="#">关键因子</a>
					</dd>
				</dl>
				<dl>
					<dt>开发者工具</dt>
					<dd>
						<a hotrep="hp.header.product.devtool1" href="#">移动加速</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.devtool2" href="#">应用加固</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.devtool3" href="#">信鸽推送</a>
					</dd>
				</dl>
				<dl>
					<dt>开发者服务</dt>
					<dd>
						<a hotrep="hp.header.product.service1" href="#">安全认证服务</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.service2" href="#">域名备案</a>
					</dd>
				</dl>
			</div>
		</div>
		<div id="solution" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="solution">
			<div class="navigation-down-inner">
				<dl style="margin-left: 380px;">
					<dd>
						<a class="link" hotrep="hp.header.solution.1" href="#">微信</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a class="link" hotrep="hp.header.solution.2" href="#">游戏</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a class="link" hotrep="hp.header.solution.3" href="#">移动应用</a>
					</dd>
				</dl>
			</div>
		</div>
		<div id="support" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="support">
			<div class="navigation-down-inner">
				<dl style="margin-left: 610px;">
					<dd>
						<a class="link" hotrep="hp.header.support.1" href="#">资料库</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a class="link" hotrep="hp.header.support.2" href="#">论坛</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a class="link" hotrep="hp.header.support.3" href="#">亿元扶持</a>
					</dd>
				</dl>
			</div>
		</div>
		<div id="cooperate" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="cooperate">
			<div class="navigation-down-inner">
				<dl style="margin-left: 480px;">
					<dd>
						<a hotrep="hp.header.partner.1" href="#">代理商</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a hotrep="hp.header.partner.2" href="#">微信服务商</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a hotrep="hp.header.partner.3" href="#">创投机构</a>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</div>
	</div>
	<p>
		jQuery宽屏下拉菜单导航，设置了最小宽度980px,适合在互联网页面中使用。 	</p>

		<h2>
		2  面包屑导航	</h2>
	<div class="codeView bs-docs-example ">
				<ul class="breadcrumb pngfix ">
				  		  			<a href="/" class="maincolor ">
	首页	</a>
  			<span class="c_gray en">&gt;</span>
  			<a href="#">
		组件	</a>
  			<span class="c_gray en">&gt;</span>
  			<span class="c_gray">
	当前页面	</span>
	    </ul>
	</div>

		<h2>
		3  翻页导航	</h2>
	<div class="codeView bs-docs-example ">
			<div id="pageinfo" class="pd-10 "></div>
    
	<div id="pageNav" class="pageNav "></div>

<script type="text/javascript">
$(function(){
$(document).ready(function(){

//optional set
pageNav.pre="&lt;上一页";
pageNav.next="下一页&gt;";

//  p,当前页码,pn,总页面
pageNav.fn = function(p,pn){
//document.getElementById("pageinfo").innerHTML ="当前页:"+p+"  ,  总页: "+pn;// js调用方式
$("#pageinfo").text("当前页:"+p+" 总页: "+pn);
};

//重写分页状态,跳到第三页,总页33页
pageNav.go(1,13);
});
});
</script>	</div>

		<h2>
		4  顶部导航	</h2>
	<div class="codeView bs-docs-example ">
		<div class="topnav">
	<div class="wp cl" style="width:90%">
				<div class="l ">
		您好，欢迎登录！	</div>
  			<div class="r) ">
		  			<span class="r_nav">
		[ 	<a>
		登录	</a>
 ]	</span>
  			<span class="pipe">
		|	</span>
  			<span class="r_nav">
		[ 	<a>
		注册	</a>
 ]	</span>
  			<span class="pipe">
		|	</span>
<span class="r_nav">
  			<a>
		  			收藏本站
			</a>
  			<span class="pipe">
		|	</span>
  			<span class="r_nav">
		  				<a>
		设为首页	</a>
      			</span>
		</div>
  	</div>
</div>
	</div>

		<h2>
		5  导向	</h2>
	<div class="codeView bs-docs-example ">
			<div class="four steps ">
		  		<span class="step  ">
		第一步	</span>
    		<span class="step active ">
				第二步		</span>
			<span class="step disabled ">
				第三步		</span>
			<span class="step disabled ">
				第四步 		</span>
	</div>
	</div>
		<h2>
		6  响应式的导航栏	</h2>
	<p>
		为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes 	<b>
		.collapse、.navbar-collapse	</b>
 的 &lt;div&gt; 中。折叠起来的导航栏实际上是一个带有 class 	<b>
		.navbar-toggle	</b>
 及两个 data- 元素的按钮。第一个是 	<b>
		data-toggle	</b>
，用于告诉 JavaScript 需要对按钮做什么，第二个是 	<b>
		data-target	</b>
，指示要切换到哪一个元素。三个带有 class 	<b>
		.icon-bar	</b>
 的 &lt;span&gt; 创建所谓的汉堡按钮。这些会切换为 	<b>
		.nav-collapse	</b>
 &lt;div&gt; 中的元素。为了实现以上这些功能，您必须包含     <a href="bootstrap-collapse-plugin.html" target="_blank">
        Bootstrap 折叠（Collapse）插件    </a>
（网页缩放可以看到效果奥）。	</p>
	<div class="codeView bs-docs-example ">
				<nav class="navbar navbar-default" role="navigation">
				   		<div class="navbar-header "		>
				   	  		<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#example-navbar-collapse">
				         		<span class="sr-only">
				切换导航		</span>
         		<span class="icon-bar">
						</span>
         		<span class="icon-bar">
						</span>
         		<span class="icon-bar">
						</span>
      		</button>
      		<a class="navbar-brand" href="#">
				首页		</a>
    		</div>
   		<div id="example-navbar-collapse" class="collapse navbar-collapse "		>
				      		<ul class="nav navbar-nav ">
				         		<li class="active ">
				<a href="#">
		  iOS		</a>
		</li>
             	<li>
		        <a href="#">
          SVN        </a>
    	</li>
         		<li class="dropdown ">
				            		<a class="dropdown-toggle" href="#" data-toggle="dropdown">
				Java		<b class="caret">
						</b>
		</a>
            		<ul class="dropdown-menu ">
						          	<li>
		        <a href="#">
          jmeter        </a>
    	</li>
		          	<li>
		        <a href="#">
          另EJB        </a>
    	</li>
		          	<li>
		        <a href="#">
          Jasper Report        </a>
    	</li>
		      		<li class="divider ">
			</li>
		          	<li>
		        <a href="#">
          分离的链接        </a>
    	</li>
		      		<li class="divider ">
			</li>
		          	<li>
		        <a href="#">
          另一个分离的链接        </a>
    	</li>
		    		</ul>
         		</li>
      		</ul>
   		</div>
		</nav>
	</div>

		<h2>
		7  导航集合	</h2>
	<div class="codeView bs-docs-example ">
			<article class="col-xs-12 col-sm-12 col-md-12 navigation-box" >
					<div class="collapse navbar-collapse bg-color-white "		>
								<ul class="nav navbar-nav ">
									<li class="active ">
				<a href="javascript:void(0);">
		  链接1		</a>
		</li>
			    	<li>
		        <a href="javascript:void(0);">
          链接2        </a>
    	</li>
					<li class="dropdown ">
										<a class="dropdown-toggle" href="javascript:void(0);" data-toggle="dropdown">
				下拉链接 		<b class="caret">
						</b>
		</a>
						<ul class="dropdown-menu ">
									    	<li class="dropdown ">
		        <a href="javascript:void(0);">
          操作1        </a>
    	</li>
					    	<li class="dropdown ">
		        <a href="javascript:void(0);">
          操作2        </a>
    	</li>
					    	<li class="dropdown ">
		        <a href="javascript:void(0);">
          操作3        </a>
    	</li>
					    	<li class="dropdown ">
		        <a href="javascript:void(0);">
          操作4        </a>
    	</li>
					    	<li class="dropdown ">
		        <a href="javascript:void(0);">
          操作5        </a>
    	</li>
			    		</ul>
					</li>
		  		</ul>
				<form  role="search" class="navbar-form navbar-left ">
						<div class="form-group "		>
						<input   class="form-control" type="text"  placeholder="查询"/>
		</div>
				<button type="submit" class="btn btn-default ">
						  提交				</button>
		</form>
			</div>
	</article>
<p style="clear:both"></p>	</div>


		<h3>
		组件包	</h3>
	<pre class="prettyprint linenums"><span class="Huialert-danger">以上组件依赖org.tinygroup.navigation包即可（仅7 导航集合组件依赖org.tinygroup.Smart-navigation包）</span></pre>
